<Card.Text><b>Memo:</b> {todo.memo}</Card.Text>

<Card.Text>Date created: {todo.created}</Card.Text>

</div>

<Link to={{

pathname: "/todos/" + todo.id,

state: {

currentTodo: todo

}

}}>

<Button variant="outline-info" className="me-2">

Edit

</Button>

</Link>

<Button variant="outline-danger">

Delete

</Button>

</Card.Body>

</Card>

)

})}

</Container>

);

}

export default TodosList;

Code Explanation

We use the map function again where for each todo in the todos array, we render a Card component from React-

bootstrap (https://react-bootstrap.github.io/components/cards/ - fig. 2).

Figure 2

Each Card contains a todo with its:

- title:

<Card.Title>{todo.title}</Card.Title>

- memo:

<Card.Text><b>Memo:</b> {todo.memo}</Card.Text>

- created date:

<Card.Text>Date created: {todo.created}</Card.Text>

- Edit Link:

<Link to={{

pathname: "/todos/" + todo.id,

state: {

currentTodo: todo

}

}}>

<Button variant="outline-info" className="me-2">

Edit

</Button>

</Link>

- Delete Link:

<Button variant="outline-danger">

Delete

</Button>

You can view all of the todo’s properties back in the model file todobackend/todo/models.py:

Analyze Code

…

class Todo(models.Model):

title = models.CharField(max_length=100)

memo = models.TextField(blank=True)

#set to current time

created = models.DateTimeField(auto_now_add=True)

completed = models.BooleanField(default=False)